<template>
	<div class="app-container">
		<yd-form class="yd-form-wraper" :options="formOptions" :model="formData" @form-init="formInited" @search="formInited">
			<template #form-btn>
				<el-button type="primary" @click="searchHandler">查询</el-button>
			</template>
		</yd-form>
		<!--  -->
		<div class="chart-box">
			<el-row :gutter="10" class="chart-item">
				<!-- 操作系统占比 -->
				<el-col :span="9">
					<yd-card v-loading="loading.operateLoading">
						<div class="yd-card-header">
							<div class="yd-card-title">
								<span class="yd-circle"></span>
								<span>操作系统占比（访问量）</span>
							</div>
						</div>
						<div ref="operateSystemPercent" class="yd-chart"></div>
					</yd-card>
				</el-col>
				<!-- 操作系统平均处理时长 -->
				<el-col :span="15">
					<yd-card v-loading="loading.operateLoading">
						<div class="yd-card-header">
							<div class="yd-card-title">
								<span class="yd-circle"></span>
								<span>操作系统平均处理时长</span>
							</div>
						</div>
						<div ref="operateSystemAvgDealTime" class="yd-chart"></div>
					</yd-card>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="chart-item">
				<!-- 浏览器占比 -->
				<el-col :span="9">
					<yd-card v-loading="loading.browserLoading">
						<div class="yd-card-header">
							<div class="yd-card-title">
								<span class="yd-circle"></span>
								<span>浏览器占比（访问量）</span>
							</div>
						</div>
						<div ref="browserPercent" class="yd-chart"></div>
					</yd-card>
				</el-col>
				<!-- 浏览器平均处理时长 -->
				<el-col :span="15">
					<yd-card v-loading="loading.browserLoading">
						<div class="yd-card-header">
							<div class="yd-card-title">
								<span class="yd-circle"></span>
								<span>浏览器平均处理时长</span>
							</div>
						</div>
						<div ref="browserAvgDealTime" class="yd-chart"></div>
					</yd-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onActivated, getCurrentInstance } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import * as echarts from 'echarts';
import { cockpitChartStyle, noDataOption } from '@/utils/defaultChartConfig';
import { getOperateSystemData, getBrowserData } from '@/api/bpm/analysis/client_analysis';
const instance = getCurrentInstance();
const proxy = instance?.proxy;

const router = useRouter();

// 图表统一样式
const chartStyle = cockpitChartStyle();

// 操作系统百分比
const operateSystemPercent = ref();
// 操作系统平均处理时长
const operateSystemAvgDealTime = ref();
// 浏览器占比
const browserPercent = ref();
// 浏览器处理时长
const browserAvgDealTime = ref();

// 图标实例
const chart: anyObj = {};
const loading = reactive({
	operateLoading: false,
	browserLoading: false,
});

// 表单项配置
const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		label: '业务系统',
		prop: 'systemId',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodeList',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '业务名称',
		prop: 'businessCodeList',
		attrs: {
			multiple: true,
		},
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		span: 8,
		enableCrossDay: true,
	},
]);

const formData = reactive<FormModelType>({});

onMounted(() => {
	initChart();
});

const formInited = () => {
	searchHandler();
};

const searchHandler = () => {
	queryOperateSystemData();
	queryBrowserData();
};

const initChart = () => {
	chart.operateSystemPercent = echarts.init(operateSystemPercent.value);
	chart.operateSystemAvgDealTime = echarts.init(operateSystemAvgDealTime.value);
	chart.browserPercent = echarts.init(browserPercent.value);
	chart.browserAvgDealTime = echarts.init(browserAvgDealTime.value);
};
// 查询图表
const queryOperateSystemData = () => {
	loading.operateLoading = true;
	getOperateSystemData(formData)
		.then((res: ApiResponse) => {
			if (res.code !== 0 || Array.isArray(res.data) === false || !res.data.length) {
				renderNoDataChart(chart.operateSystemPercent);
				renderNoDataChart(chart.operateSystemAvgDealTime);
				return;
			}
			renderOperateSystemPercentChart(res.data);
			renderOperateSystemAvgDealTimeChart(res.data);
		})
		.finally(() => {
			loading.operateLoading = false;
		});
};
const queryBrowserData = () => {
	loading.browserLoading = true;
	getBrowserData(formData)
		.then((res: ApiResponse) => {
			if (res.code !== 0 || Array.isArray(res.data) === false || !res.data.length) {
				renderNoDataChart(chart.browserPercent);
				renderNoDataChart(chart.browserAvgDealTime);
				return;
			}
			renderBrowserPercentChart(res.data);
			renderBrowserAvgDealTimeChart(res.data);
		})
		.finally(() => {
			loading.browserLoading = false;
		});
};

// 渲染图表
const renderOperateSystemPercentChart = (arr: any[]) => {
	if (arr instanceof Array === false || arr.length === 0) {
		renderNoDataChart(chart.operateSystemPercent);
		return;
	}
	const seriesData: any[] = [];

	arr.forEach((opt: anyObj) => {
		seriesData.push({
			value: opt.visitCount,
			name: opt.operatingSystem,
		});
	});
	chart.operateSystemPercent?.clear();
	chart.operateSystemPercent.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// 悬浮提示
		tooltip: {
			trigger: 'item',
			formatter: '{b}：{d}%',
			// confine: true,
		},
		series: [
			{
				name: '占比',
				type: 'pie',
				minAngle: 12,
				radius: ['50%', '70%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: true,
				percentPrecision: 4,
				// 标签文本
				label: {
					formatter: '{b}：\n\n{c},  {d}%',
					// formatter
				},
				// 高亮状态
				emphasis: {
					label: {
						show: true,
						fontSize: '14',
						fontWeight: 'bold',
					},
				},
				data: seriesData,
			},
		],
	});
};
const renderOperateSystemAvgDealTimeChart = (arr: any[]) => {
	if (arr instanceof Array === false || arr.length === 0) {
		renderNoDataChart(chart.operateSystemAvgDealTime);
		return;
	}
	const seriesData: any[] = [];
	// x轴数据
	const xData: any[] = [];

	arr.forEach((opt: anyObj) => {
		seriesData.push(opt.avgDealTime);
		xData.push(opt.operatingSystem);
	});
	// debugger;
	chart.operateSystemAvgDealTime?.clear();

	chart.operateSystemAvgDealTime.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		// x轴
		xAxis: {
			type: 'category',
			data: xData,
			...chartStyle.xAxisStyle,
		},
		// y轴
		yAxis: {
			type: 'value',
			name: '单位：（毫秒）',
			...chartStyle.yAxisStyle,
		},
		// // 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '平均处理时长',
				type: 'bar',
				barWidth: 25,
				data: seriesData,
				label: {
					show: true,
					position: 'top',
				},
			},
		],
	});
};
const renderBrowserPercentChart = (arr: any[]) => {
	if (arr instanceof Array === false || arr.length === 0) {
		renderNoDataChart(chart.browserPercent);
		return;
	}
	const seriesData: any[] = [];

	arr.forEach((opt: anyObj) => {
		seriesData.push({
			value: opt.visitCount,
			name: opt.browser,
		});
	});
	chart.browserPercent?.clear();
	chart.browserPercent.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// 悬浮提示
		tooltip: {
			trigger: 'item',
			formatter: '{b}：{d}%',
		},
		series: [
			{
				name: '占比',
				type: 'pie',
				minAngle: 12,
				radius: ['50%', '70%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: true,
				percentPrecision: 4,
				// 标签文本
				label: {
					formatter: '{b}：\n\n{c},  {d}%',
				},
				// 高亮状态
				emphasis: {
					label: {
						show: true,
						fontSize: '14',
						fontWeight: 'bold',
					},
				},
				data: seriesData,
			},
		],
	});
};
const renderBrowserAvgDealTimeChart = (arr: any[]) => {
	if (arr instanceof Array === false || arr.length === 0) {
		renderNoDataChart(chart.browserAvgDealTime);
		return;
	}
	const seriesData: any[] = [];
	// x轴数据
	const xData: any[] = [];

	arr.forEach((opt: anyObj) => {
		seriesData.push(opt.avgDealTime);
		xData.push(opt.browser);
	});
	chart.browserAvgDealTime?.clear();
	chart.browserAvgDealTime.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// color: ['#2beded'],
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		// x轴
		xAxis: {
			type: 'category',
			data: xData,
			axisLine: {
				lineStyle: {
					color: '#ffffff',
				},
			},
		},
		// y轴
		yAxis: {
			type: 'value',
			name: '单位：（毫秒）',
			...chartStyle.yAxisStyle,
		},
		// // 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '平均处理时长',
				type: 'bar',
				barWidth: 25,
				data: seriesData,
				label: {
					show: true,
					position: 'top',
				},
			},
		],
	});
};
// 渲染无数据的echarts
const renderNoDataChart = (chart: anyObj) => {
	// chart?.
	if (chart) {
		noDataOption(chart, {
			textStyle: {},
		});
	}
};
</script>
<style scoped>
.app-container {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 84px - 70px);
}
.chart-box {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.chart-item {
	flex: 1;
	margin-bottom: 12px;
}
.yd-chart {
	height: 88%;
}
</style>
